<template>
  <div class="table-card">
    <!-- 表头部分 -->
    <div class="table-header">
      <div class="header-row">
        <div class="header-cell main-bg">项目</div>
        <div class="header-cell">实际</div>
        <div class="header-cell">预算</div>
        <div class="header-cell">完成率</div>
        <div class="header-cell">去年</div>
        <div class="header-cell">差异率</div>
      </div>
    </div>
    <!-- 表格内容 -->
    <div class="table-body">
      <template v-if="loading">
        <div class="loading-wrapper">
          <a-spin />
        </div>
      </template>
      <template v-else>
        <div v-for="(row, index) in tableData" :key="index" class="table-row">
          <div class="table-cell table-name table-cell-left" :class="{ 'subtotal-row': isSubtotalRow(row) }">
            {{ row?.subjectName }}
          </div>
          <div class="table-cell">{{ colRender(row?.actual, row) }}</div>
          <div class="table-cell">{{ colRender(row?.budget, row) }}</div>
          <div class="table-cell">
            <div class="trend-indicator" :class="getTrendClass(row?.budgetDiff)">
              {{ formatDiff(row?.budgetDiffRate) }}
            </div>
          </div>
          <div class="table-cell">{{ colRender(row?.lActual, row) }}</div>
          <div class="table-cell">
            <div class="trend-indicator" :class="getTrendClass(row?.yearDiff)">
              {{ formatDiff(row?.yearDiffRate) }}
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import * as MathUtil from '/@/utils/MathUtil';

  // Props定义
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    customRow: {
      type: Function,
      default: null,
    },
  });

  // 计算属性
  const tableData = computed(() => props.dataList || []);

  const isSubtotalRow = (row: any) => {
    if (!row || !row.subjectCode) return false;
    return row.subjectCode === '0901' || row.subjectCode === '0902';
  };

  // const formatRate = (value: any) => {
  //   if (value === undefined || value === null) return '-';
  //   return MathUtil.percent2DFormatter(Number(value), 0);
  // };
  const getTrendClass = (value: any) => {
    if (value === undefined || value === null) return '';
    const numValue = Number(value);
    return !isNaN(numValue) && numValue >= 0 ? 'trend-up' : 'trend-down';
  };
  const formatDiff = (value: any) => {
    if (value === undefined || value === null) return '-';
    const numValue = Number(value);
    if (isNaN(numValue)) return '-';
    const formattedValue = MathUtil.percent2DFormatter(numValue, 0);
    return numValue >= 0 ? `▲ ${formattedValue}` : `▼ ${formattedValue.substring(1)}`;
  };
  const colRender = (val, m) => {
    if (m.showFormatter) {
      const [methodName, ...params] = m.showFormatter.split('|');
      if (typeof MathUtil[methodName] === 'function') {
        return MathUtil[methodName](val, ...params);
      }
    }
    return val;
  };
</script>

<style lang="less" scoped>
  .table-card {
    width: 100%;
    padding: 5px;
    background: #fff;
    border-radius: 8px;
  }

  .table-header {
    .header-row {
      display: grid;
      grid-template-columns: 240px repeat(5, minmax(0, 1fr));
      gap: 10px;
      background: #fff;

      .header-cell {
        padding: 12px;
        font-size: 14px;
        font-weight: 600;
        color: #1d2129;
        text-align: center;
        background: #e9e7f2;
      }
    }
  }

  .table-body {
    margin-top: 5px;

    .table-row {
      display: grid;
      grid-template-columns: 240px repeat(5, minmax(0, 1fr));
      gap: 10px;
      background: #fff;
      margin-bottom: 5px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .table-cell {
    padding: 12px;
    font-size: 14px;
    color: #1d2129;
    text-align: center;
    background: #f7f5f4;

    &.first-col {
      text-align: left;
    }
  }
  .table-cell-left {
    text-align: right;
  }
  .table-name {
    background: #e9e7f2;
  }
  .trend-indicator {
    &.trend-up {
      color: #00b578;
    }

    &.trend-down {
      color: #f53f3f;
    }
  }

  .table-footer {
    margin-top: 5px;

    .table-row {
      display: grid;
      grid-template-columns: 150px repeat(5, minmax(0, 1fr));
      gap: 10px;
      background: #fff;

      .data-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;

        &:last-child {
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }
  }

  .loading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  .main-bg {
    background: #d3cee2 !important;
  }

  // 虚线边框样式
  .table-row {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 1px dashed #e5e6eb;
    }
  }
  .table-cell-font-bold {
    font-weight: bold;
  }

  .subtotal-row {
    font-weight: 600;
    color: #1d2129;
    text-align: left !important;
  }

  .table-cell-font-bold {
    font-weight: 600;
    color: #1d2129;
  }
  .main-bg {
    background: #d3cee2 !important;
  }
</style>
